<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Number guessing game</title>

		<style>
			html {
				font-family: sans-serif;
			}
			
			body {
				width: 50%;
				max-width: 800px;
				min-width: 480px;
				margin: 0 auto;
			}
			
			.lastResult {
				color: white;
				padding: 3px;
			}
		</style>
	</head>

	<body>
		<h1>Number guessing game</h1>

		<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

		<div class="form">
			<label for="guessField">Enter a guess: </label>
			<input type="text" id="guessField" class="guessField">
			<input type="submit" value="Submit guess" class="guessSubmit">
		</div>

		<div class="resultParas">
			<p class="guesses"></p>
			<p class="lastResult"></p>
			<p class="lowOrHi"></p>
		</div>

		<script>
			/**
			     * 1.生成1到100之间的随机数
			     2.记录玩家在第几轮。从1开始
			     3.为玩家提供一种猜测数字的方法
			     4.一旦提交猜测，首先将他记录在某处，以便用户可以看到他们先前的猜测
			     5.检查它是否是正确的数字
			     6.如果是正确的：
			         1.显示祝贺消息
			         2.阻止玩家输入更多的猜测
			         3.显示控制允许玩家重新开始游戏
			     7.如果它错了，并且玩家有剩余轮次：
			         1.告诉玩家他们错了
			         2.允许他们输入另一个猜测
			         3.将圈数增加1
			     8.如果他是错误的，并且玩家没有剩余轮次
			         1.告诉玩家游戏结束
			         2.阻止玩家输入更多猜测
			         3.显示控制允许玩家重新开始游戏
			     9.一旦游戏重新启动，请确保游戏逻辑和用户界面完全重置，然后返回步骤1

			     **/
			var randomNumber = Math.floor(Math.random() * 100) + 1;
			var guesses = document.querySelector('.guesses');
			var lastResult = document.querySelector('.lastResult');
			var lowOrHi = document.querySelector('.lowOrHi');
			var guessSubmit = document.querySelector('.guessSubmit');
			var guessField = document.querySelector('.guessField');
			var guessCount = 1;
			var resetButton;

			function checkGuess() {
				var userGuess = Number(guessField.value);
				if(guessCount === 1) {
					guesses.textContent = 'previous guesses:';
				}
				guesses.textContent += userGuess + '';

				if(userGuess === randomNumber) {
					lastResult.textContent = 'Congratulation! You got it right';
					lastResult.style.backgroundColor = 'green';
					lowOrHi.textContent = '';
					setGameOver();
				} else if(guessCount === 10) {
					lastResult.textContent = "!!!GAME OVER!!!";
					setGameOver();
				} else {
					lastResult.textContent = 'Wrong!';
					lastResult.style.backgroundColor = 'red';
					if(userGuess < randomNumber) {
						lowOrHi.textContent = 'Last guess was too low!';
					} else if(userGuess > randomNumber) {
						lowOrHi.textContent = 'Last guess was too high!';
					}
				}
				guessCount++;
				guessField.value = '';
				guessField.focus();
			}

			guessSubmit.addEventListener('click', checkGuess);
			
			
		</script>
	</body>

</html>